<template>
  <div>
    <div class="plugins-tips">项目管理:项目创建</div>
    <div>
      <div>
        <h1>所有项目</h1>
      </div>
      <!-- 创建项目 -->
      <div class="projects-operate">
        <div class="project-create-btn">
          <el-button type="primary" :icon="Plus" @click="dialogOverflowVisible = true">新建项目</el-button>
        </div>
        <div id="projects-search-input">
          <el-input class="projects-search" placeholder="请输入关键字搜索">
            <template #prefix>
              <el-icon class="el-input__icon">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <!-- 项目管理列表 -->
      <div class="projects-list-panel">
        <div v-for="(item, index) in projectDataList" :key="index">
          <ProjectItem :projectData="item" :key="Math.random() * 100" />
        </div>
      </div>
    </div>
    <!-- Dialog弹出框 -->
    <el-dialog v-model="dialogOverflowVisible" title="创建新项目" width="918" top="50px" destroy-on-close draggable overflow>
      <div>
        <CreateProject @closeDialog="handleOperateDialog" />
      </div>      
    </el-dialog>
  </div>
</template>

<script setup>
import ProjectItem from '@/components/project/projectItem.vue'
import CreateProject from '@/components/project/createProject.vue'
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search } from '@element-plus/icons-vue'

const dialogOverflowVisible = ref(false)

//测试项目列表模拟数据
let projectDataList = [
  { id: 1, name: "DevOps全流程示例项目", description: "华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论。", img_url: require("@/assets/img/template-project-item1.png"), category: "科研项目类" },
  { id: 2, name: "IPD-云服务全流程示例项目", description: "IPD是华为集成产品开发的核心流程，项目内置华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论", img_url: require("@/assets/img/template-project-item2.png"), category: "IPD-自运营软件/云服务类" },
  { id: 3, name: "IPD-独立软件示例项目", description: "IPD是华为集成产品开发的核心流程，项目内置平台类软件场景，可体验结构化流程、跨项目协作能力来对产品研发进行高质高效地管理。", img_url: require("@/assets/img/template-project-item3.png"), category: "独立软件开发类" },
  { id: 4, name: "DevOps全流程示例项目", description: "华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论。", img_url: require("@/assets/img/template-project-item1.png"), category: "科研项目类" },
  { id: 5, name: "IPD-云服务全流程示例项目", description: "IPD是华为集成产品开发的核心流程，项目内置华为端到端（HE2E）DevOps实施框架，是结合了华为30年研发经验并集合了业界先进的实践所形成的一套可操作可落地的敏捷开发方法论", img_url: require("@/assets/img/template-project-item2.png"), category: "IPD-自运营软件/云服务类" },
  { id: 6, name: "IPD-独立软件示例项目", description: "IPD是华为集成产品开发的核心流程，项目内置平台类软件场景，可体验结构化流程、跨项目协作能力来对产品研发进行高质高效地管理。", img_url: require("@/assets/img/template-project-item3.png"), category: "独立软件开发类" },
  
]

//绑定子组件操作方法
const handleOperateDialog = (value,data) =>{
  dialogOverflowVisible.value = value
  projectDataList.push(data);
}


</script>

<style lang="scss" scoped>
.plugins-tips {
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.projects-operate {
  width: 100%;
  display: flex;
  margin: 10px 0;

  >div {
    margin-right: 10px;
  }

  .projects-search {
    min-width: 100px;
  }
}

.projects-list-panel {
  margin: 30px 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, 317px);
  justify-content: center;
  grid-gap: 16px;
  gap: 16px;
}
</style>